<template>
	
	<!--寄售订单-->
	
	<view class="wanl-order-list">
		<view class="navbar">
			<view class="nav-item text-df" 
			v-for="(item, index) in navList" :key="item.state" 
			:class="{ current: tabCurrentIndex === index }" 
			@tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		
		<swiper :current="tabCurrentIndex" style="height: calc(100% - 80rpx)" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<wanl-empty text="没有找到任何订单" v-if="tag.loaded === true && tag.orderList.length === 0"/>
					
					<!-- 订单列表 -->
					<view v-for="(order, okey) in tag.orderList" :key="order.id" class="order-item radius-bock">
						
						<view class="js-order-item">
							<view class="product-box">
								<image :src="order.image" class="product-image"></image>
								
								<view class="flex flex-direction align-start justify-between">
									<view class="product-title text-cut-2">{{order.name || ''}}</view>
									<view class="product-price">{{order.price || ''}}</view>
								</view>
							</view>
							
							<view class="buy-info-box mt28" v-if="order.mj_name">
								<view>
									<view class="buy-info">买家信息</view>
									<view class="buy-name">{{order.mj_name || ''}}</view>
									<view class="buy-phone">{{order.mj_phone || ''}}</view>
								</view>
								
								<view  class="photo-image-box2" @click="handleImage(order, okey, key)"  v-if="order.pay_img_show">
									<image :src="order.pay_img_show" class="photo-image2"></image>
								</view>
								
								<view  class="photo-image-box2" @click="bigImage(order.pay_img)"  v-if="order.pay_img && !order.pay_img_show">
									<image :src="order.pay_img" class="photo-image2"></image>
								</view>
								
								<view class="photo-image-box" @click="handleImage(order, okey, key)" v-if="!order.pay_img">
									<image src="/static/images/photo.png" class="photo-image"></image>
									<view class="photo-title">支付凭证</view>
								</view>
							</view>
							
							<view class="buy-info-box mt20">
								<view>
									<view class="buy-info sale-color">卖家信息</view>
									<view class="buy-name">{{order.sk_name || ''}}</view>
									<view class="buy-phone">{{order.sk_phone || ''}}</view>
								</view>
								
								<image :src="order.sk_address" class="qrcode-image" @click="bigImage(order.sk_address)"></image>
							</view>
							
							<view class="order-btn" v-if="order.is_pay" @click="submitPay(order, okey, key)">确认支付</view>
							
							<view class="order-btn" v-if="order.is_confirmpay" @click="submitPayed(order, okey, key)">确认收款</view>
						</view>
						
					</view>
					
					
					<uni-load-more :status="tag.loadingType" :content-text="contentText"/>
					<view class="edgeInsetBottom"></view> 
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { mapState } from 'vuex';	
export default {
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '全部',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},
				{
					state: 3,
					text: '寄售中',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},
				{
					state: 1,
					text: '待支付',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},
				{
					state: 2,
					text: '待收款',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},
				{
					state: 4,
					text: '已寄售',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				}
			],
			
			
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载...',
				contentnomore: ''
			},
		};
	},
	computed: {
		...mapState(['user', 'statistics','common'])
	},
	onLoad(options) {
		//state 0 全部 1待支付 2待收款 3寄售中 4 已寄售
		if (!options.state) {
			options.state = 0;
		}
		this.tabCurrentIndex = +options.state;
		// #ifndef MP
		this.loadData();
		// #endif
		
		// #ifdef MP
		if (options.state == 0) {
			this.loadData();
		}
		// #endif
	},
	methods: {
		//获取订单列表
		async loadData(source) {
			console.log("go loadData");
			
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			
			//判断是否最后一页
			if (navItem.loadingType == 'noMore') {
				return;
			}
			
			//tab切换只有第一次需要加载数据
			// if (source === 'tabChange' && navItem.loaded === true) {
			// 	return;
			// }
			
			//防止重复加载
			if (navItem.loadingType === 'loading') {
				return;
			}
			
			navItem.loadingType = 'loading';
			
			// 获取列表
			await uni.request({
				url: '/good/orderlist',
				data: {
					type: state,
					page: navItem.current_page
				},
				success: res => {
					navItem.current_page = res.data.current_page; //当前页码
					if(navItem.current_page == 1){
						navItem.orderList = []
					}
					
					if (res.data.last_page === res.data.current_page) {
						navItem.loadingType = 'noMore';
					} else {
						navItem.loadingType = 'more';
						navItem.current_page++;
					}
					
					res.data.data.forEach(item => {
						navItem.orderList.push(item);
					});
					
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
				}
			});
		},

		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		
		//支付订单
		paymentOrder(id){
			this.$wanlshop.to(`/pages/user/money/pay?order_id=${id}&order_type=goods`);
		},
		handleImage(order, index, navbarkey) {
			let _this = this;
			
			uni.chooseImage({
				crop: {
					quality: 60
				},
				success: res => {
					uni.request({
						url: '/wanlshop/common/uploadData',
						success: updata => {
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								// 读取图片宽高
								uni.getImageInfo({
									src: res.tempFilePaths[i],
									success: image => {
										uni.uploadFile({
											url: updata.data.uploadurl,
											filePath: image.path,
											name: 'file',
											formData:updata.data.storage == 'local' ? null : updata.data.multipart,
											header:{
												token: _this.user.token,
											},
											success: data => {
												_this.navList[navbarkey].orderList[index].pay_img = JSON.parse(data.data).data.url;
												_this.navList[navbarkey].orderList[index].pay_img_show = res.tempFilePaths[i];
											},
											fail: error =>{
												uni.showToast({title: JSON.parse(error.data).msg, icon: 'error', position: true});
											}
										});
									}
								});
							}
						}
					});
				}
			});
		},
		bigImage(image){
			uni.previewImage({
				urls: [image], 
				current: '', 
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {},
			})
		},
		//确认支付
		submitPay(order, okey, key){
			if(!order.pay_img){
				this.$wanlshop.msg('请上传支付凭证');
				return false;
			}
			
			uni.request({
				url: '/good/orderpay',
				method: 'POST',
				data: {
					id: order.id,
					img: order.pay_img,
				},
				success: res => {
					uni.stopPullDownRefresh();
					if(res.code == 1 || res.res.code == 1){
						this.$wanlshop.msg('提交成功');
						this.navList[this.tabCurrentIndex].current_page = 1;
						this.navList[this.tabCurrentIndex].loadingType = 'more';
						this.loadData();
					}else{
						this.$wanlshop.msg(res.msg);
					}
				}
			});
			
		},
		//确认收款
		submitPayed(order, okey, key){
			uni.request({
				url: '/good/orderconfirmpay',
				method: 'POST',
				data: {
					id: order.id,
				},
				success: res => {
					uni.stopPullDownRefresh();
					if(res.code == 1 || res.res.code == 1){
						this.$wanlshop.msg('提交成功');
						this.navList[this.tabCurrentIndex].current_page = 1;
						this.navList[this.tabCurrentIndex].loadingType = 'more';
						this.loadData();
					}else{
						this.$wanlshop.msg(res.msg);
					}
				}
			});
		},
	}
};
</script>


<style>
page {
	height: 100%;
}
</style>


<style scoped lang="scss">
.wanl-order-list .navbar .nav-item.current{
	color: #666666;
}

.wanl-order-list .navbar .nav-item.current:after {
    border-bottom: 2px solid #366BEB;
}

.js-order-item{
	width: 702rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 28rpx;
}

.product-box{
	display: flex;
	border-bottom: 1rpx solid #EBEBEB;
	padding-bottom: 28rpx;
}

.product-image{
	width: 160rpx;
	height: 160rpx;
	border-radius: 20rpx;
	margin-right: 31rpx;
}

.product-title{
	width: 457rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
	line-height: 42rpx;
	text-align: left;
}

.product-price{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #F53938;
	line-height: 42rpx;
}

.buy-info-box{
	width: 646rpx;
	height: 156rpx;
	background: #F6F9FD;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18rpx 18rpx 18rpx 28rpx;
	position: relative;
}

.photo-image-box{
	width: 120rpx;
	height: 120rpx;
	border: 1rpx dashed #666666;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.photo-image{
	width: 48rpx;
	height: 48rpx;
}

.photo-title{
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
	margin-top: 9rpx;
}

.mt28{
	margin-top: 28rpx;
}

.buy-info{
	position: absolute;
	top: 0rpx;
	left: 0rpx;
	width: 130rpx;
	height: 36rpx;
	background: #F97D21;
	border-radius: 20rpx 0rpx 20rpx 0rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
}

.buy-name{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
	margin-top: 37rpx;
}

.buy-phone{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
	margin-top: 19rpx;
}

.sale-color{
	background-color: #366BEB !important;
}

.qrcode-image{
	width: 120rpx;
	height: 120rpx;
	border-radius: 20rpx;
}

.mt20{
	margin-top: 20rpx;
}

.order-btn{
	width: 646rpx;
	height: 88rpx;
	background: #366BEB;
	border-radius: 20rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 42rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 32rpx;
}
.photo-image-box2{
	width: 120rpx;
	height: 120rpx;
	border-radius: 20rpx;
}
.photo-image2{
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
}
</style>
